<script setup>
//数组中放了对象
const items = $ref([{ message: 'Foo' }, { message: 'Bar' }])
const userNames = $ref(['张三','李四','王五','赵六'])
const prices = $ref([100,105.12,200.10,300.55])
const user = $ref({userName:'张三',age:22,sex:'男'})

</script>

<template>
  <h4>v-for循环</h4>
  <p v-for="item in items">
    {{item.message}}
  </p>
  <ul>
    <li v-for="(userName,index) in userNames"> {{index}}、{{userName}} </li>
  </ul>

  <p v-for="price in prices"> {{price}} </p>

  <h4>v-for循环对象</h4>
  <p v-for="(value,key) in user">{{key}}:{{value}}</p>
  <h4>v-for直接和数字使用</h4>
  <p v-for="n in 10">{{n}}</p>

  <h4>在template上使用v-for</h4>
  <template v-for="userName in userNames">
    {{userName}}<br/>
  </template>

  <h4>v-if优先级比v-for高 一起使用的时候需要注意</h4>
  <template v-for="price in prices">
  <p  v-if="price >= 200"> {{price}} </p>
  </template>
</template>

<style>

</style>
